<template>
  <div>
    <Modal :mask-closable="false"
        v-model="toggle"
        width="1000px"
        class="modal-content-layout"
        :title="$t('查看设备历史记录')">
      <div class="tableContent">
        <Table
            ref="selection"
            row-key="id"
            :columns="columns"
            :data="dataSource"
            @on-sort-change="onSortChange"
        >
          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="viewDetail(row)"><i
                class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}</span>
          </template>
        </Table>
      </div>

      <div slot="footer">
        <Button type="default" @click="toggle = false">{{ $t('common.Cancle') }}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false"
        v-model="viewScoreToggle"
        width="1000px"
        class="modal-content-layout"
        :title="$t('查看设备历史记录')">
      <div class="tableContent">
        <commentscore dataSource="list" v-if="viewScoreToggle" :scoreData="viewScoreDataColumns"/>
      </div>

      <div slot="footer">
        <Button type="default" @click="viewScoreToggle = false">{{ $t('common.Cancle') }}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import commentscore from '../../../../components/commentscore'

export default {
  name: "viewScoreInfo",
  components: {commentscore},
  data() {
    return {
      toggle: false,
      dataSource: [],
      viewScoreData: [],
      columns: [
        {
          title: this.$t('评分'),
          key: 'score',
          align: 'center',
          sortable: 'custom',
        },
        {
          title: this.$t('分类'),
          key: 'category',
          align: 'center',
          sortable: 'custom',
        },
        {
          title: this.$t('评分人'),
          key: 'createByStr',
          align: 'center',
          sortable: 'custom',
        },
        {
          title: this.$t('评分时间'),
          key: 'createTime',
          align: 'center',
          sortable: 'custom',
        },
        {
          title: this.$t('操作'),
          align: 'center',
          slot: "action"
        }
      ],
      viewScoreDataColumns: [],
      params: {},
      viewScoreToggle: false
    }
  },
  methods: {
    show() {
      this.toggle = true
      this.params.dmsDeviceId = this.$route.query.id
      this.params.id = 1
      this.getList()
    },
    onSortChange(value) {
      if (value.order === 'normal'){
        this.params = {
          dmsDeviceId: this.$route.query.id,
          id:1
        }
      }else{
        this.params = {
          dmsDeviceId: this.$route.query.id,
          orderType: value.order === 'asc' ? 1 : 2,
          [value.key]: value.key
        }
      }
      this.getList()
    },
    getList() {
      this.axios({
        method: 'post',
        url: '/dms/dmsDeviceScore/historys',
        data: {
          ...this.params
        }
      }).then(res => {
        if (res.code === 200) {
          this.dataSource = res.data
        }
      })
    },
    viewDetail(row) {
      this.viewScoreToggle = true
      this.viewScoreDataColumns = JSON.parse(row.result)
    }
  }
}
</script>

<style scoped>

</style>
